<template>
	<view class="wp">
		<view class="status">{{info.order.statusstr}}</view>
		<view class="shop">
			<view class="list_item" v-for="item in info.orderGoods" :key="item.id"
				@click="$navTo('/pages/product/groupbuy?id='+item.goodsid)">
				<image :src="item.thumb" mode=""></image>
				<view class="info">
					<view class="title clamp">{{item.goodstitle}}</view>
					<view>单价：{{item.realprice}}</view>
					<view>总计：{{info.order.price}}</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="list_item">
				<view class="title">订单编号:</view>
				<view class="content">
					<text>{{info.order.ordersn}}</text>
					<button size="mini" @click="copyTap(info.order.ordersn)">复制</button>
				</view>
			</view>
			<!-- <view class="list_item">
				<view class="title">售价合计:</view>
				<view class="content">
					<text>{{info.order.price}}</text>
				</view>
			</view> -->
			<view class="list_item">
				<view class="title">实付金额:</view>
				<view class="content">
					<text class="text_color">{{info.order.price}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">店铺名:</view>
				<view class="content">
					<text>{{info.order.supname}}</text>
				</view>
			</view>
			<view class="list_item" v-if="status==1">
				<view class="title">电话:</view>
				<view class="content">
					<text>{{info.order.mobile}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">创建时间:</view>
				<view class="content">
					<text>{{info.order.createtime}}</text>
				</view>
			</view>
			<view class="list_item" v-if="status!=1&&info.order.status==3">
				<view class="title">核销状态:</view>
				<view class="content">
					<text>已核销</text>
				</view>
			</view>
			<view class="list_item" v-if="info.order.finishtime">
				<view class="title">核销时间:</view>
				<view class="content">
					<text>{{info.order.finishtime}}</text>
				</view>
			</view>
		</view>
		<view class="he_xiao" v-if="status!=1&&info.order.status==1">
			<image @longtap="saveImage" :src="info.img" mode=""></image>
		</view>
		<view class="buttons">
			<button v-if="status!=1" size="mini" @click="kefu">联系客服</button>
			<button class="text_color" v-if="status!=1&&info.order.status=='0'&&info.order.paytype!=3" size="mini"
				@click="$navTo('/pages/money/pay?orderid=' + info.order.id)">付款</button>
			<button size="mini" v-if="status!=1&&info.order.status=='1'&&info.order.canrefund"
				@click="tiao">{{info.order.refund_button}}</button>
			<!-- <button v-if="status==1 && info.order.status==1" size="mini" @click="dhTap">核销订单</button>     --> 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				status: '',
				info: {
					img: '',
					order: {
						createtime: "",
						id: "",
						ordersn: "",
						price: "",
						status: "",
						statusstr: "",
						finishtime: '',
					},
					orderGoods: [],
				},
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.status = option.status;
			if (this.status == 1) {
				this.getInfo2();
			} else {
				this.getInfo();
			}
		},
		methods: {
			saveImage() {
				var that = this;
				uni.showModal({
					title: '保存',
					content: '保存核销码？',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.info.img,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								}
							});
						}
					}
				});
			},
			getInfo2() {
				this.$axios('order/getOrderInfo', "POST", 'supplier', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			getInfo() {
				this.$axios('detail/getOrderInfo', "POST", 'order', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			dhTap() {
				this.$axios('order/dh', "POST", 'supplier', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('核销成功!');
						setTimeout(() => {
							this.$navRed('../order/detailsw?id=' + this.id + '&status=1')
						}, 1000)
					}
				})
			},
			tiao() {
				var _this = this;
				if (this.info.order.refundtype == 0) {
					uni.navigateTo({
						url: "/pages/order/Customer?id=" + _this.id
					})
				} else {
					uni.navigateTo({
						url: "/pages/order/AfterSales?id=" + _this.id
					})
				}
			},
			kefu() {
				let that = this;
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc85558bf452926a1b',
					},
					corpId: 'ww818270697fafba52',
					fail(res) {
						that.$api.msg('打开失败请重试！');
					}
				})
			},
			copyTap(v) {
				uni.setClipboardData({
					data: v
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wp {
		padding-bottom: 150upx;
	}

	.status {
		background: $bg-color;
		color: #fff;
		font-size: 40upx;
		line-height: 120upx;
		letter-spacing: 2px;
		text-align: center;
		transform: scaleY(1.2);
	}

	.shop {
		padding: 35upx 20upx 0;


		.list_item {
			display: flex;
			margin-bottom: 20upx;

			image {
				border-radius: 20upx;
				height: 160upx;
				width: 160upx;
			}

			.info {
				color: #666;
				font-size: 28upx;
				line-height: 40upx;
				padding-left: 20upx;
				width: calc(100% - 170upx);

				.title {
					color: #000;
					font-size: 30upx;
				}
			}
		}
	}

	.order {
		border-top: 1px #d3d3d3 solid;
		line-height: 65upx;
		font-size: 32upx;
		padding: 20upx;

		.list_item,
		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				padding-right: 20upx;
			}

			.content {
				justify-content: right;

				text {
					margin-right: 20upx;
				}
			}
		}
	}

	.text_color {
		color: $bg-color;
	}

	.he_xiao {
		padding: 20upx;
		text-align: center;

		image {
			border-radius: 20upx;
			height: 300upx;
			width: 300upx;
		}
	}

	.buttons {
		background: #fff;
		line-height: 110upx;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: right;
		width: 100%;
		z-index: 100;

		button {
			margin: 0 20upx;
			letter-spacing: 1px;
		}
	}
</style>